<template>
  <Tab :tabs="tabs" :current="current" @goBack="goBack" :header="tabHeader">
    <div slot="index">
      <el-form :inline="true" label-width="80px">
        <el-form-item label="搜索">
          <el-input
            style="width: 350px;"
            v-model="queryParams.keyword"
            placeholder="请输入客户编号/真实姓名/身份证号/用户昵称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select style="width: 100px" v-model="queryParams.checkStat" placeholder="状态" clearable size="small">
            <el-option
              v-for="dict in checkStatOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="daterange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

      </el-form>

      <el-table v-loading="loading" :data="postList" @sort-change="sortChange">
        <el-table-column label="客户编号" align="center" prop="platCustNo">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="客户编号" width="250" trigger="hover">
              <div>{{scope.row.platCustNo}}</div>
              <span slot="reference">{{ scope.row.platCustNo.substr(0,10)+'...' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" align="center" prop="custName"/>
        <el-table-column label="证件号码" align="center" prop="idNo">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="证件号码" width="250" trigger="hover">
              <div>{{scope.row.idNo}}</div>
              <span slot="reference">{{ scope.row.idNo.substr(0,10)+'...' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="证件类型" align="center" prop="idType" :formatter="typeFormat"/>
        <el-table-column label="用户端" align="center" prop="username">
          <template slot-scope="scope">
            <el-link @click="handleCurrent('detail',scope.row.id)"  v-if="scope.row.userId" title="查看详情" type="primary">{{scope.row.username}}</el-link>
            <span v-else class="text-warning">无</span>
          </template>
        </el-table-column>
        <el-table-column label="美发师端" align="center" prop="stylistUsername">
          <template slot-scope="scope">
            <el-link @click="handleCurrent('detail',scope.row.id)" v-if="scope.row.stylistId" title="查看详情" type="primary">{{scope.row.stylistUsername}}</el-link>
            <span v-else class="text-warning">无</span>
          </template>
        </el-table-column>
        <el-table-column label="门店端" align="center" prop="storeUsername">
          <template slot-scope="scope">
            <el-link @click="handleCurrent('detail',scope.row.id)" v-if="scope.row.storeId" title="查看详情" type="primary">{{scope.row.storeUsername}}</el-link>
            <span v-else class="text-warning">无</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center" prop="checkStat">
          <template slot-scope="scope">
            <span v-if="scope.row.checkStat===0" class="text-danger">审核失败</span>
            <span v-else>审核通过</span>
          </template>
        </el-table-column>
        <el-table-column label="用户余额" align="center" prop="userBalance">
          <template slot-scope="scope">
            <el-link  @click="handleCurrent('detail',scope.row.id)" v-if="scope.row.userBalance||scope.row.userBalance===0" title="查看详情" type="primary">
              {{formatCurrency(scope.row.userBalance)}}
            </el-link>
            <span v-else class="text-warning">无</span>
          </template>
        </el-table-column>
        <el-table-column label="美发师余额" align="center" prop="stylistBalance">
          <template slot-scope="scope">
            <el-link @click="handleCurrent('detail',scope.row.id)" v-if="scope.row.stylistBalance||scope.row.stylistBalance===0" title="查看详情" type="primary">
              {{formatCurrency(scope.row.stylistBalance)}}
            </el-link>
            <span v-else class="text-warning">无</span>
          </template>
        </el-table-column>
        <el-table-column label="门店余额" align="center" prop="storeBalance">
          <template slot-scope="scope">
            <el-link @click="handleCurrent('detail',scope.row.id)" v-if="scope.row.storeBalance||scope.row.storeBalance===0" title="查看详情" type="primary">
              {{formatCurrency(scope.row.storeBalance)}}
            </el-link>
            <span v-else class="text-warning">无</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="预付帐户" align="center"/>-->
        <el-table-column label="创建时间" align="center" prop="createtime" :show-overflow-tooltip="true" sortable="custom">
          <template slot-scope="scope">
            <span>{{ dateFormat(scope.row.createtime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作记录" align="center" width="200px;">
          <template slot-scope="scope" >
            <div v-show="scope.row.checkStat!==0">
              <el-link type="primary"  @click="handleCurrent('detail',scope.row.id)">查看详情</el-link>
              <el-link type="primary"  @click="handleCurrent('take',scope.row.platCustNo)">提现记录</el-link>
              <el-link type="primary"  @click="handleCurrent('order',scope.row)">订单记录</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="detail">
      <Detail :tfsId="tfsId"></Detail>
    </div>
    <div slot="take">
      <Take :platCustNo="platCustNo"></Take>
    </div>
    <div slot="order">
      <Order :row="row" @hideTab="hideTab"></Order>
    </div>
  </Tab>
</template>

<script>
  import {list} from "@/api/main/financial/user";
  import Tab from "@/components/Tab";
  import Take from "./take";
  import Detail from "./detail";
  import Order from "./order";

  export default {
    components: {
      Tab, Detail,Take,Order
    },
    data() {
      return {
        tabHeader:true,
        current: 'index',
        tabs: [{index: 'index', name: ''}, {index: 'detail', name: '用户详情'},{index:'take',name:'提现记录'},{index:'order',name:'订单记录'}],
        loading: false,
        postList: [],
        statusOptions: [],
        checkStatOptions: [],
        idTypeOptions: [],
        total: 0,
        tfsId: undefined,
        platCustNo:undefined,
        row:undefined,
        daterange: undefined,
        queryParams: {
          checkStat:undefined,
          keyword: undefined,
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 'T1.createtime DESC'
        }
      }
    },
    created() {
      this.getDicts("yy_financial_idType").then(response => {
        this.idTypeOptions = response.data;
      });

      this.getDicts("yy_financial_checkStat").then(response => {
        this.checkStatOptions = response.data;
      });
      this.getList();
    },
    methods: {
      handleCurrent(str, data) {
        if (str === 'detail') {
          this.tfsId = data;
        }else if(str==='take'){
          this.platCustNo=data;
        }else{
          this.row=data;
        }
        this.current = str;
      },
      sortChange(params) {
        if (params.prop === 'createtime') {
          let createtime = 'T1.createtime';
          if (params.order === 'ascending') {
            this.queryParams.orderByColumn = createtime + ' ASC';
          } else {
            this.queryParams.orderByColumn = createtime + ' DESC';
          }
        }
        this.getList();
      },
      handleQuery() {
        if(this.daterange){
          this.queryParams.startTime= this.daterange[0]+" 00:00:00";
          this.queryParams.endTime=this.daterange[1]+" 23:59:59";
        }else{
          this.queryParams.startTime=null;
          this.queryParams.endTime=null;
        }
        this.queryParams.pageNum = 1;
        this.getList();
      }, typeFormat(row, column) {
        let option;
        if (column.property === 'idType') {
          option = this.idTypeOptions;
        } else if (column.property === 'checkStat') {
          option = this.checkStatOptions;
        }
        return this.selectDictLabel(option, row[column.property]);
      },
      getList() {
        this.loading = true;
        list(this.queryParams).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      goBack(message) {
        this.current = 'index';
      },
      hideTab(message){
        console.log(message);
        this.tabHeader=message;
      }
    },

  }
</script>


<style scoped>
  .el-link {
    font-size: 12px;
  }
</style>
